<template>
	<section class="main">
		<h3 class="nametitle">{{title}}</h3>
		<aside class="main_detail">
			<div class="top">
				<dl class="first">
					<dd>
						<span class="title">专利名称：</span>
						<p>{{inforDate.patentName}}</p>
					</dd>
					<dd>
						<span class="title">申请日：</span>
						<p>{{inforDate.applyDate}}</p>
					</dd>
					<dd>
						<span class="title">华勤代理人：</span>
						<p>{{inforDate.agentUser}}</p>
					</dd>
				</dl>
				<dl>
					<dd>
						<span class="title">委托日：</span>
						<p>{{inforDate.entrustDate}}</p>
					</dd>
					<dd>
						<span class="title">发明人：</span>
						<p>{{inforDate.inventor}}</p>
					</dd>
					<dd>
						<span class="title">技术信息：</span>
						<p>本文发明提供了一种</p>
					</dd>
				</dl>
			</div>
			<div class="bottom">
				<h3>【 费用清单 】</h3>
				<div class="tableMain">
					<table class="table" border="1" bordercolor="#e5e5e5" v-if="payList.length>0 || zizuList.length>0">
						<thead>
							<tr>
								<th v-for="(item,index) in payList">{{item.costName}}</th>
								<th :colspan="zizuList.length">资助金额</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td v-for="item in payList">{{item.costMoney}}（<span v-if="item.costStatus=='0'">未支付</span><span v-if="item.costStatus=='1'">已支付</span>）</td>
								<td v-for="item in zizuList">{{item.costName}}：{{item.costMoney}}（<span v-if="item.costStatus=='0'">未申领</span><span v-if="item.costStatus=='1'">已申领</span>）</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<a class="button" href="javascript:void(0);" onclick="history.go(-1);">&lt;&nbsp;返回</a>
		</aside>
	</section>
</template>

<script>
	export default{
		data (){
			return {
				title:"已申报专利信息",
				id:this.$route.query.id,
				inforDate:{},
				payList:[],
				zizuList:[]
			}
			
		},
		created(){
			this.setTitle();
			this.setActive();
			this.getPatentInfo();
			this.getPatentInfoFare();
		},
		methods:{
			setTitle(){
				//设置上面的标题
				this.$emit("getTitle",this.title);
			},
			setActive(){
				//设置左侧的菜单高亮
				this.$root.Bus.$emit("nowActive","05")
			},
			getPatentInfo(){
				//获取专利的信息
				this.$ajax.get(this.global.url+"/api/user/getPatentinfo?id="+this.id).then(res=>{
					let data=res.data;
					if(data.code=="0"){
						/*console.log("111")*/
						this.inforDate=data.data;
					}
				}).catch(error=>{
					console.log(error)
				})
			},
			getPatentInfoFare(){
				//获取专利费用信息
				var _this=this;
				this.$ajax.get(this.global.url+"/api/user/getPatentInfoFare?id="+this.id).then(res=>{
					let data=res.data;
					if(data.code=='0'){
						if(data.data){
							var arr=data.data;
							arr.forEach(function(ind,i){
								if(ind.costType=="0"){
									_this.payList.push(ind)
								}
								else if(ind.costType=='1'){
									_this.zizuList.push(ind);
								}
							})
							console.log(_this.payList)
							console.log(_this.zizuList)
						}
					}
				}).catch(error=>{
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
.main{
	padding: 2.5rem 3.5% 2.5rem 2.9%;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
.main_detail{
	width:100%;
	background: #fff;
	padding:2rem 3.8% 1.2rem;
}
.top{
	padding-bottom: 2.2rem;
	border-bottom: 1px solid #e5e5e5;
	overflow: hidden;
	margin-bottom:2.6rem;
}
.top .first{
	width:37%;
	padding-right:2%;
}
.top dl{
	float: left;
}
.top dd{
	overflow: hidden;
	display: flex;
	flex-direction: row;
	font-size: 14px;
	color:#333333;
	margin-bottom:15px;
	line-height: 22px;
}
.top dd .title{
	display: block;
	width:110px;
	padding-right:15px;
	text-align: right;
	
}
.top dd p{
	flex: 1;
	overflow: hidden;
}
.bottom h3{
	font-size: 16px;
	color:#53306c;
	line-height: 34px;
	margin-bottom:10px;
}
.bottom .tableMain{
	width:100%;
	max-width: 990px;
	overflow: auto;
}
.bottom .table{
	width:100%;
	min-width:800px;
	text-align:center;
	border-collapse:collapse;  
	border-spacing:0;
	background: #fff;
	font-size: 14px;
}
.table thead th{
	background: #53306c;
	color:#fff;
	padding:0.75rem 1rem;
	line-height: 22px;
	font-weight: normal;
	/*height: 64px;*/
}
.table tbody tr{
	cursor: pointer;
}
.table tbody td{
	color:#333333;
	/*height: 64px;*/
	padding:0.75rem 1rem;
	line-height: 22px;
}
.button{
	margin-top:5rem;
	font-size: 14px;
	display: block;
}

.nametitle{
		font-size: 1.5rem;
		color:#53306c;
		text-align: center;
		line-height: 2.5rem;
		margin-bottom: 1.5rem;
		margin-top:1.5rem;
		display: none;
	}

@media only screen and (min-width:320px) and (max-width:1366px){
	.top .first,.top dl{
		width:100%;
	}
	
}
@media only screen and (min-width:960px) and (max-width:1440px){
	.main{
		padding:1.5rem 2rem;
	}
}
@media only screen and (min-width: 320px) and (max-width: 959px) {
	.main{
		padding: 0px 1.5rem 1.5rem 1.5rem;
	}
	.nametitle{
		display: block;
	}
}
</style>